<template>
  <div id="app">
    <!-- <div class="container">
      <div class="aside"><Aside></Aside></div>
      <div class="main">
        <div class="hearder">
          <Header></Header>
        </div>
        <div class="content">
          <router-view />
        </div>
      </div>
    </div> -->
    <router-view />
  </div>
</template>
<script>
import Header from "./components/Header.vue";
import Aside from "./components/Aside.vue";
import "./assets/global.less";
export default {
  name: "app",
  components: {
    Header,
    Aside,
  },

  computed: {},
  methods: {},
};
</script>
<style scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  /* background-color: #ccc; */
}
.aside {
  width: 300px;
  height: 100%;
  background-image: url(../src/assets/paly2.jpg);
  /* background-position: 100% 100% ; */
  background-repeat: no-repeat;
  background-size: 100%;
}
.main {
  width: calc(100% - 300px);
  height: 100%;
}
.hearder {
  height: 150px;
  width: 100%;
}
.content {
  height: calc(100% - 150px);
  width: 100%;

  background-color: #f8f8f8;

  /* overflow-y: scroll; */
}
</style>
